﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>word转pdf</title>
    <!--pageoffice.js一定要引用--->
    <script type="text/javascript" src="../pageoffice.js"></script>
    <script type="text/javascript">
        function ConvertFile() {
            document.getElementById("Button1").disabled = true;

            var saveFileUrl = "/FileMakerToPDF/SaveDoc";
            var openFileUrl = "/FileMakerToPDF/FileMakerToPDF";
            filemakerctrl.SaveFilePage = saveFileUrl;

            filemakerctrl.CallFileMaker({
                url: openFileUrl,
                success: function (res) {//res：获取服务器端fs.CustomSaveResult设置的保存结果
                    console.log(res);
                    console.log("completed successfully.");
                    setProgress(100);
                },
                progress: function (pos) {
                    console.log("running " + pos + "%");
                    setProgress(pos);
                },
                error: function (msg) {
                    console.log("error occurred: " + msg);
                }
            });
        }

        function setProgress(percent) {
            var progressBar = document.getElementById("progressBar");
            progressBar.style.width = percent + '%';
            progressBar.innerText = percent + '%';
        }
    </script>
    <style>
        #progressBarContainer {
            width: 500px;
            background-color: #e0e0e0;
            border-radius: 5px;
            padding: 3px;
            margin: 10px auto;
        }

        #progressBar {
            height: 20px;
            width: 0%;
            background-color: #76b900;
            border-radius: 5px;
            text-align: center;
            line-height: 20px; /* 使文字垂直居中 */
            color: white;
        }
    </style>
</head>
<body style="text-align: center;">
    <div style="text-align: center;">
        <h3 style="margin:20px;">演示：动态填充数据到Word模板生成PDF文件的效果</h3>
        <div style="width:650px;margin: 0 auto; font-size:14px;">
            <p style="text-align: left;">
                演示内容：<br />
                &nbsp;&nbsp;&nbsp;&nbsp;本示例演示了调用FileMaker对象在客户端动态生成Word文件并自动另存为PDF到服务器上，却不在线打开文件的功能，模拟了直接在服务器端填充数据到Word模板生成PDF文件的效果。
            </p>
            <p style="text-align: left;">
                操作说明：<br />
                &nbsp;&nbsp;&nbsp;&nbsp;1. 点击“生成PDF文件”按钮，生成一份PDF格式的荣誉证书文件。<br />
                &nbsp;&nbsp;&nbsp;&nbsp;2. 生成完毕后，即可在“FileMakerToPDF/doc”目录下看到生成的PDF文件：zhengshu.pdf。
            </p>
        </div>
        <input id="Button1" type="button" value="生成PDF文件" onclick="ConvertFile()" />
        <div id="progressBarContainer">
            <div id="progressBar"></div>
        </div>
    </div>
</body>
</html>